<template>
    <view class="title padding-lr-sm padding-bottom-0 padding-top" v-if="AppointmentService.length > 0">
        <view class="cuIcon-titles padding-tb-xs themeColor">
            进行中服务
        </view>
        <swiper class="AppointmentService" next-margin="120rpx" previous-margin="120rpx">
            <swiper-item class="swiper-item" v-for="(item, index) in AppointmentService" :key="item.id">
                <view class="swiper-item-body" :class="{ 'timeout': item.timeout }"
                @tap="$utils.$page.open('/pages/user/service/details?id=' + item.id)">
                    <view class="flex space-between">
                        <view class="text-sm">技师：{{ item.nickname }}</view>
                        <view class="text-sm">{{ item.title }}</view>
                    </view>
                    <x-countdown class="time" v-if="item.countdown" :time="item.time" :end-text="item.end_text" @end="getList" />
                    <view class="time" v-else>{{ item.time }}</view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    data() {
        return {
            AppointmentService: []
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            if (this.$store.getters.hasLogin) {
                this.$utils.$api.AppointmentService.user().then(data => {
                    this.initData(data)
                }).catch(() => {
                    this.AppointmentService=[];
                })
            }
        },
        initData(e) {
            let data = [];
            for (let i = 0; i < e.length; i++) {
                let item = e[i];
					const start_time_date = new Date(item.start_time.replace(/-/g,'/'));
                    const date=new Date;
                    item.timeout=false;
                    item.countdown=false;
                    switch(item.state){
                        // 待服务
                        case 1:
                            if(start_time_date<date){
                                item.timeout=true;
                            }
                            item.time=`${this.getDayName(start_time_date)} ${start_time_date.getHours().toString().padStart(2, '0')}:${start_time_date.getMinutes().toString().padStart(2, '0')}`;
                            break;
                        // 已出发
                        case 2:
                            start_time_date.setMinutes(start_time_date.getMinutes()+item.commuting_duration);
                            item.time=(start_time_date.getTime()-date.getTime())/1000;
                            item.countdown=true;
                            item.end_text='超时一小时以上';
                            if(item.time<=0){
                                item.timeout=true;
                            }
                            break;
                        // 已到达
                        case 3:
                            item.time='已达到';
                            if(item.verification){
                                item.time='已到达(已核验)';
                            }
                            break;
                        // 进行中
                        case 4:
                            const service_start_time = new Date(item.service_start_time.replace(/-/g,'/'));
                            const service_end_time = service_start_time;
                            service_end_time.setMinutes(service_end_time.getMinutes()+item.duration);
                            item.time=(service_end_time.getTime()-date.getTime())/1000;
                            item.end_text='服务结束';
                            item.countdown=true;
                            break;
                    }
                data.push(item);
            }
            this.AppointmentService = data;
        },
    }
}
</script>

<style lang="scss" scoped>
.AppointmentService {
    height: 160rpx;

    .swiper-item {
        box-sizing: border-box;
        padding: 0 20rpx;
    }

    .swiper-item-body {
        height: 100%;
        box-sizing: border-box;
        padding: 20rpx;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        background: linear-gradient(45deg, #00e3a7, #00aa7f);
        color: #FFFFFF;

        .time {
            flex: 1;
            font-size: 40rpx;
            font-weight: 600;
            padding: 20rpx;
            text-align: center;
        }

        &.timeout {
            background: linear-gradient(45deg, $u-error, $u-error-dark);
        }
    }
}</style>
